<div class="animated fadeIn">
  <div class="container-fluid">
    <div class="card">
      <div class="card-header">
        <h1 class="h5 m-0">User list</h1>
      </div>
      <div class="card-block">
        <div class="row">
          <div class="col-xs-12 col-12 col-md-9 form-group">
            <button type="button" class="btn btn-success" name="create" id="create" (click)="createUser()">Create</button>
          </div>
        </div>
        <table class="table table-striped">
          <thead>
          <tr>
            <th>#</th>
            <th>Username</th>
            <th>Create Date</th>
            <th></th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let user of users | async">
            <th scope="row">{{user.id}}</th>
            <td>{{user.username}}</td>
            <td>{{user.create_date | date:"yyyy-MM-dd hh:mm"}}</td>
            <td>
              <button type="button" class="btn-small btn-primary" (click)="editUser(user)">edit
              </button>
              <button type="button" class="btn-small btn-danger" (click)="deleteUser(user)">delete
              </button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<div bsModal #editModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">Update User</h4>
        <button type="button" class="close pull-right" (click)="editModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
          <div class="form-group">
            <div class="input-group">
              <span class="input-group-addon">Username</span>
              <input type="text" [(ngModel)]="userToEdit.username" class="form-control" id="inputUsername"
                     name="inputUsername" placeholder="Username">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" (click)="update()">Update</button>
        <button type="button" class="btn btn-secondary" (click)="editModal.hide()">Cancel</button>
      </div>
    </div>
  </div>
</div>
<div bsModal #createModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">Create User</h4>
        <button type="button" class="close pull-right" (click)="editModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
          <div class="form-group">
            <div class="input-group">
              <span class="input-group-addon">Username</span>
              <input type="text" [(ngModel)]="userToCreate.username" class="form-control" id="inputUsername1"
                     name="inputUsername" placeholder="Username">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success" (click)="create()">Create</button>
        <button type="button" class="btn btn-secondary" (click)="createModal.hide()">Cancel</button>
      </div>
    </div>
  </div>
</div>

